<template>
    <div>
        <UserLayout>
            <div class="app-row app-col-space10">
                <div class="app-col-xs12 app-col-sm8">
                    <div class="app-card">
                        <div class="app-card-header">
                            <div>绑定账号</div>
                            <div class="header-setting">
                                <a-tooltip>
                                    <template v-slot:title>返回</template>
                                    <a-button
                                            type="dashed"
                                            shape="circle"
                                            size="small"
                                            @click="goUrl('/user')"
                                    >
                                        <ArrowLeftOutlined/>
                                    </a-button>
                                </a-tooltip>
                            </div>
                        </div>
                        <div class="app-card-body">
                            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-form-item label="账号">
                                    <a-input v-model:value="form.account"/>
                                </a-form-item>
                                <a-form-item label="密码">
                                    <a-input v-model:value="form.password" type="password"/>
                                </a-form-item>
                                <a-form-item label="重复密码">
                                    <a-input v-model:value="form.passwords" type="password"/>
                                </a-form-item>
                                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                                    <a-button type="primary" @click="submit">提 交</a-button>
                                </a-form-item>
                            </a-form>
                        </div>
                    </div>
                </div>
                <div class="app-col-xs12 app-col-sm4">
                    <HeadImg></HeadImg>
                </div>
            </div>

        </UserLayout>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import website from "/src/config/website";
    import {goUrl} from '/src/util/index';

    import UserLayout from '/src/components/user/Layout.vue';
    import HeadImg from '/src/components/user/HeadImg.vue';
    import {ArrowLeftOutlined} from '@ant-design/icons-vue';

    import {bindAccount} from '/src/request/api/user';

    export default {
        name: "bindPhone",
        // 组件
        components: {
            UserLayout,
            HeadImg,
            ArrowLeftOutlined,
        },
        // 数据
        data() {
            return {
                website: website,
                // vuex 状态
                store: useStore().state,
                // 表单
                labelCol: {span: 4},
                wrapperCol: {span: 14},
                form: {
                    account: '',
                    password: '',
                    passwords: '',
                },
            }
        },
        // DOM未渲染前调用
        created() {

        },
        // 方法
        methods: {
            // 前往
            goUrl(url) {
                goUrl(url);
            },
            // 绑定手机号
            submit() {
                let that = this,
                    form = that.form;
                if (!form.account) {
                    that.$message.warning('账号不能为空');
                    return false;
                }
                if (!form.password) {
                    that.$message.warning('密码不能为空');
                    return false;
                }
                bindAccount({
                    account: form.account,
                    password: form.password,
                    passwords: form.passwords,
                }).then(res => {
                    that.$message.success(res.msg);
                    goUrl('/user')
                }).catch(err => {
                    console.log(err);
                    that.$message.error(err.msg);
                })
            },
        }
    }
</script>

<style scoped>

</style>